<template>
    <div>
        <el-dialog
            title="订单详情"
            width="70%"
            :visible.sync="visible"
            :close-on-click-modal="false"
            @close="handleDialogClose">

            <div class="dialog_centent_wrap" ref="dialog_wrap">
                <!-- 订单操作 -->
                <el-card class="table_tool_bar_wrap mb10" shadow="never" v-if="order.status !== 3">
                    <div class="action">
                        <!-- 待付款 -->
                        <div v-show="order.status===0">
                            <el-button @click="handleCancelOrder" :submitLoading="submitLoading" type="primary" size="small">取消订单</el-button>
                        </div>
                        <!-- 待发货 -->
                        <div v-show="order.status===1">
                            <el-button @click="handleInnerDeliveryVisible" :submitLoading="submitLoading" type="primary" size="small">订单发货</el-button>
                            <el-button @click="handleCancelOrder" :submitLoading="submitLoading" type="primary" size="small">取消订单</el-button>
                        </div>
                        <!-- 已发货 -->
                        <div v-show="order.status===2">
                            <el-button @click="handleConfirmReceivePack" :submitLoading="submitLoading" type="primary" size="small">确认收货</el-button>
                        </div>
                        <!-- 已关闭（取消订单/退货退款成功） -->
                        <div v-show="order.status===4">
                            <el-button @click="handleDeleteOrder" :submitLoading="submitLoading" type="danger" size="small">删除订单</el-button>
                        </div>
                    </div>
                </el-card>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">基本信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">订单编号</el-col>
                            <el-col :span="4" class="table_cell_title">订单类型</el-col>
                            <el-col :span="4" class="table_cell_title">下单时间</el-col>
                            <el-col :span="4" class="table_cell_title">支付时间</el-col>
                            <el-col :span="4" class="table_cell_title">支付状态</el-col>
                            <el-col :span="4" class="table_cell_title">订单状态</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.orderSn}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.orderType | formatOrderType}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.ctime}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.paymentTime ? order.paymentTime : '-'}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.isPay | formatIsPay}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.status | formatStatus}}</el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">会员信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">会员昵称</el-col>
                            <el-col :span="4" class="table_cell_title">手机号码</el-col>
                            <el-col :span="4" class="table_cell_title">性别</el-col>
                            <el-col :span="4" class="table_cell_title">会员等级</el-col>
                            <el-col :span="4" class="table_cell_title">代理商</el-col>
                            <el-col :span="4" class="table_cell_title">注册时间</el-col>
                        </el-row>
                        <el-row v-if="order.member">
                            <el-col :span="4" class="table_cell">{{order.member.nickname}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.member.mobile}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.member.sex | formatSex}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.member.level}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.wmsAgentInfo?order.wmsAgentInfo.companyName:'无'}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.member.ctime}}</el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">收货信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">收件人</el-col>
                            <el-col :span="4" class="table_cell_title">手机号</el-col>
                            <el-col :span="4" class="table_cell_title">地址编码</el-col>
                            <el-col :span="12" class="table_cell_title">收件地址</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.receiverName}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receiverPhone}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receiverPostCode}}</el-col>
                            <el-col :span="12" class="table_cell">
                                {{order.receiverProvince}}
                                {{order.receiverCity}}
                                {{order.receiverRegion}}
                                {{order.receiverDetailAddress}}
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider" v-show="order.status > 1">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">发货信息</span>
                </div>
                <div class="detail_wrap" v-show="order.status > 1">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="6" class="table_cell_title">配送方式</el-col>
                            <el-col :span="6" class="table_cell_title">物流公司</el-col>
                            <el-col :span="6" class="table_cell_title">快递单号</el-col>
                            <el-col :span="6" class="table_cell_title">发货时间</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" class="table_cell">{{order.deliverType | formatDeliverType}}</el-col>
                            <el-col :span="6" class="table_cell">{{order.deliveryCompany}}</el-col>
                            <el-col :span="6" class="table_cell">{{order.deliverySn}}</el-col>
                            <el-col :span="6" class="table_cell">{{order.deliveryTime}}</el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">商品信息</span>
                </div>
                <div class="detail_wrap">
                    <!-- 表格-SKU列表 -->
                    <el-table
                        ref="tableSku"
                        size="medium"
                        empty-text="暂无数据"
                        element-loading-text="给我一点时间"
                        fit border highlight-current-row
                        :data="order.skus">

                        <el-table-column label="序号" type="index" prop="index" width="60" align="center" />
                        <el-table-column label="规格图片" align="center" width="130">
                            <template slot-scope="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.skuPic" fit="contain"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="skuName" align="left" show-overflow-tooltip/>
                        <el-table-column label="价格(元)" width="120" align="center">
                            <template slot-scope="scope">
                                <span>￥{{scope.row.skuPrice}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.skuNum}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="小计(元)" width="200" align="center">
                            <template slot-scope="scope">
                                <span>￥{{scope.row.realAmount}}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 合计 -->
                    <div class="total_wrap">
                        <div class="wrap">
                            <div><span>商品金额:</span><span>￥{{order.totalAmount}}</span></div>
                            <div><span>运费金额:</span><span>{{order.freightType}}</span></div>
                            <!-- <div><span>优惠金额:</span><span>￥{{order.promotionAmount}}</span></div> -->
                            <div><span>应付金额:</span><span class="amount_red">￥{{order.payAmount}}</span></div>
                        </div>
                    </div>
                </div>

                <div class="divider" v-show="order.note">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">买家留言</span>
                </div>
                <div class="detail_wrap" v-show="order.note">
                    <el-alert :description="order.note" type="error" :closable="false" style="margin-bottom: 10px;height: 80px"></el-alert>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">订单日志</span>
                </div>
                <div class="detail_wrap">
                    <!-- 表格-订单日志列表 -->
                    <el-table
                        ref="tableSku"
                        size="medium"
                        empty-text="暂无数据"
                        element-loading-text="给我一点时间"
                        fit border highlight-current-row
                        :data="order.logs">

                        <el-table-column label="日期" prop="ctime" align="left" width="160" show-overflow-tooltip/>
                        <el-table-column label="操作用户" prop="operateUser" align="left" width="160" show-overflow-tooltip/>
                        <el-table-column label="动作类型" prop="operateType" align="left" width="160" show-overflow-tooltip/>
                        <el-table-column label="日志内容" prop="operateContent" align="left" show-overflow-tooltip/>
                    </el-table>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">关 闭</el-button>
            </div>

            <!-- 订单发货 -->
            <el-dialog
                width="60%"
                title="订单发货"
                :visible.sync="deliveryOrder.dialogVisible"
                append-to-body>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">收货信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">收件人</el-col>
                            <el-col :span="4" class="table_cell_title">手机号</el-col>
                            <el-col :span="4" class="table_cell_title">地址编码</el-col>
                            <el-col :span="12" class="table_cell_title">收件地址</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.receiverName}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receiverPhone}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receiverPostCode}}</el-col>
                            <el-col :span="12" class="table_cell">
                                {{order.receiverProvince}}
                                {{order.receiverCity}}
                                {{order.receiverRegion}}
                                {{order.receiverDetailAddress}}
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">快递配送</span>
                </div>
                <el-form ref="deliveryOrder" :model="deliveryOrder" :rules="rulesDelivery" @keyup.enter.native="handleExpressDelivery" label-width="120px">
                    <el-form-item label="配送方式" prop="deliverType">
                        <el-radio-group v-model="deliveryOrder.deliverType">
                            <el-radio :label="0">送货上门</el-radio>
                            <el-radio :label="1">到店自提（无需快递）</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div v-if="deliveryOrder.deliverType == 0">
                        <el-form-item label="选择快递">
                            <el-select placeholder="请选择物流公司" v-model="deliveryOrder.deliveryCompany" style="width: 300px">
                                <el-option
                                    v-for="item in companyOptions"
                                    :key="item.id"
                                    :label="item.freightName"
                                    :value="item.freightName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="快递单号" prop="deliverySn">
                            <el-input placeholder="" v-model="deliveryOrder.deliverySn" clearable style="width: 300px"></el-input>
                        </el-form-item>
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="deliveryOrder.dialogVisible = false">关 闭</el-button>
                    <el-button @click="handleExpressDelivery" type="primary" :submitLoading="submitLoading">提 交</el-button>
                </div>
            </el-dialog>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            submitLoading: false,
            order: {
                id: null,
                orderSn: null,
                memberId: null,
                memberUsername: null,
                couponId: null,
                totalAmount: null,
                payAmount: null,
                freightAmount: null,
                promotionAmount: null,
                integrationAmount: null,
                couponAmount: null,
                discountAmount: null,
                orderType: null,
                payType: null,
                sourceType: null,
                status: null,
                confirmStatus: null,
                isPay: null,
                isRefund: null,
                deliverType: null,
                deliveryCompany: null,
                deliverySn: null,
                autoConfirmDay: null,
                integration: null,
                growth: null,
                billType: null,
                billHeader: null,
                billContent: null,
                billReceiverPhone: null,
                billReceiverEmail: null,
                receiverName: null,
                receiverPhone: null,
                receiverPostCode: null,
                receiverProvince: null,
                receiverCity: null,
                receiverRegion: null,
                receiverDetailAddress: null,
                note: null,
                useIntegration: null,
                paymentTime: null,
                transactionId: null,
                deliveryTime: null,
                receiveTime: null,
                commentTime: null,
                extraJson: null,
                deleted: null,
                ctime: null,
                utime: null
            },

            // 物流公司
            companyOptions: [],

            // 订单发货
            deliveryOrder:{
                dialogVisible:false,
                id: null,
                deliverType: 0,
                deliveryCompany: null,
                deliverySn: null,
            },
            rulesDelivery: {
                deliverySn: [
                    { required: true, message: '快递单号不能为空', trigger: 'blur' }
                ]
            }

        }
    },

    methods: {
        init(id) {
            const refs = this.$refs
            this.visible = true

            this.$nextTick(() => {
                this.getInfo(id)
            })
        },

        /**
         * 关闭窗口
         */
        handleDialogClose() {
            this.$refs.dialog_wrap.scrollTo(0,0);
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/mall/omsorder/getOrderInfo/' + id,
                    method: 'GET'
                })
                this.order = Object.assign({}, res.data)
            }
        },

        /**
         * 取消订单
         */
        async handleCancelOrder() {
            const confirm = await this.$confirm('确定要取消？', '提示', { type: 'warning' }).catch(() => {})
            if(confirm) {
                const res = await this.$http({
                    url: '/mall/omsorder/cancelOrder',
                    method: 'GET',
                    params: {id: this.order.id}
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            }
        },

        /**
         * 订单发货窗口
         */
        handleInnerDeliveryVisible() {
            this.deliveryOrder.id = this.order.id
            this.getDeliveryCompany()
            this.deliveryOrder.dialogVisible = true
        },

        /**
         * 快递公司
         */
        async getDeliveryCompany() {
            const res = await this.$http({
                url: '/mall/mallexpresscompany/list',
                method: 'GET'
            })
            this.companyOptions = Object.assign({}, res.data)
        },

        /**
         * 订单发货
         */
        async handleExpressDelivery() {
            const refs = this.$refs
            this.submitLoading = true
            let valid = await refs['deliveryOrder'].validate().catch(() => {})
            if(this.deliveryOrder.deliverType == 1) {
                valid = true
            }
            if(valid) {
                const res = await this.$http({
                    url: '/mall/omsorder/expressDelivery',
                    method: 'POST',
                    data: this.deliveryOrder
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                    this.deliveryOrder.dialogVisible = true
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 确认收货
         */
        async handleConfirmReceivePack() {
            const confirm = await this.$confirm('确认收货？', '提示', { type: 'warning' }).catch(() => {})
            if(confirm) {
                const res = await this.$http({
                    url: '/mall/omsorder/confirmReceivePack',
                    method: 'GET',
                    params: {id: this.order.id}
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            }
        },

        /**
         * 删除订单
         */
        async handleDeleteOrder() {
            const confirm = await this.$confirm('确认删除订单？', '提示', { type: 'warning' }).catch(() => {})
            if(confirm) {
                const res = await this.$http({
                    url: '/mall/omsorder/delete',
                    method: 'POST',
                    data: [this.order.id]
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            }
        }

    },
    filters: {
        formatOrderType(value) {
            if (value === 0) {
                return '普通订单';
            } else if (value === 1) {
                return '活动订单';
            } else if (value === 2) {
                return '拼团订单';
            } else if (value === 3) {
                return '秒杀订单';
            } else if (value === 4) {
                return '砍价订单';
            } else if (value === 5) {
                return '核销订单';
            } else {
                return '-';
            }
        },
        formatStatus(value) {
            if (value === 0) {
                return '待付款';
            } else if (value === 1) {
                return '待发货';
            } else if (value === 2) {
                return '已发货';
            } else if (value === 3) {
                return '已完成';
            } else if (value === 4) {
                return '已关闭';
            } else {
                return '-';
            }
        },
        formatIsPay(value) {
            if (value === 0) {
                return '未支付';
            } else if (value === 1) {
                return '已支付';
            } else {
                return '-';
            }
        },
        formatDeliverType(value) {
            if (value === 0) {
                return '送货上门';
            } else if (value === 1) {
                return '到店自提';
            } else {
                return '-';
            }
        },
        formatPayType(value) {
            if (value === 0) {
                return '支付宝';
            } else if (value === 1) {
                return '微信';
            } else if (value === 2) {
                return '银联';
            } else if (value === 3) {
                return '货到付款';
            } else {
                return '-';
            }
        },
        formatSourceType(value) {
            if (value === 0) {
                return 'PC订单';
            } else if (value === 1) {
                return '微信订单';
            } else if (value === 2) {
                return 'APP订单';
            } else {
                return '-';
            }
        },
        formatSex(value) {
            if (value === 0) {
                return '保密';
            } else if (value === 1) {
                return '男';
            } else if (value === 2) {
                return '女';
            } else {
                return '-';
            }
        },
        formatDeliverType(value) {
            if (value === 0) {
                return '送货上门';
            } else if (value === 1) {
                return '无需快递';
            } else {
                return '-';
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.dialog_centent_wrap{
    height: 500px;
    overflow-y: auto;
    padding: 0 10px;
}
.divider{
    border-bottom: 1px solid #EBEEF5;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    .title{
        margin-left: 10px;
    }
}
.detail_wrap{

    .table_layout {
        margin-bottom: 20px;
        border-left: 1px solid #dcdfe6;
        border-top: 1px solid #dcdfe6;
    }

    .table_cell {
        height: 60px;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .table_cell_title {
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        padding: 10px;
        background: #f2f6fc;
        text-align: center;
        font-size: 14px;
        color: #303133;
    }

    .total_wrap{
        display: flex;
        flex-direction: column;
        border-top: 1px dashed #ccc;
        margin-top: 10px;
        padding-top: 5px;
        align-items: flex-end;
        .wrap{
            div{
                line-height: 1.5;
                width: 200px;
                display: flex;
                span:first-child{
                    display: flex;
                    min-width: 70px;
                }
                span:last-child{
                    display: block;
                }
                .amount_red{
                    color: red
                }
            }
        }
    }
}

.action{
    display: flex;
    justify-content: flex-end;
}
</style>
